import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
import {useCssVar} from "@vueuse/core";
import {
    append as svgAppend,
    attr as svgAttr,
    classes as svgClasses,
    create as svgCreate,
    select as svgSelect,
    on as svgOn
} from 'tiny-svg'
import {setConnectArrows} from "/@/views/flow/design/renderer/util";
import {isNil} from "min-dash"; // 引入默认的renderer
const HIGH_PRIORITY = 1500 // 最高优先级
export default class Renderer extends BaseRenderer { // 继承BaseRenderer
    constructor(eventBus, bpmnRenderer,textRenderer) {
        super(eventBus, HIGH_PRIORITY)
        this.bpmnRenderer = bpmnRenderer
        this.textRenderer = textRenderer
    }

    canRender(element) {

        // ignore labels
        return true;
    }

    drawShape(parentNode, element) { // 核心函数就是绘制shape

        parentNode.setAttribute('class', 'djs-visual user-task');
        let colorVar = useCssVar('--el-color-primary')
        let shape = this.bpmnRenderer.drawShape(parentNode, element)
        shape.style.setProperty('stroke', colorVar.value)
        return shape
    }
    drawConnection(parentNode, element){
        let shape = this.bpmnRenderer.drawShape(parentNode, element)
        let colorVar = useCssVar('--el-color-primary')
        shape.style.setProperty('stroke', colorVar.value)
        setConnectArrows(shape,colorVar.value)
        return shape
    }

    getShapePath(shape) {
        return this.bpmnRenderer.getShapePath(shape)
    }
}

Renderer.$inject = ['eventBus', 'bpmnRenderer','textRenderer',]